<template>
  <v-container
    fluid
    tag="section"
  >
    <v-card>
      <v-tabs
        v-model="tab"
        background-color="primary"
        dark
      >
        <v-tab
          v-for="item in items"
          :key="item.tab"
        >
          {{ item.tab }}
        </v-tab>
      </v-tabs>

      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item.tab"
        >
          <dashboard v-if="item.id==='Dashboard'" />
          <cmd-line-view v-if="item.id==='CmdLineView'" />
          <imme-log-view v-if="item.id==='ImmeLogView'" />
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-container>
</template>

<script>
  import Dashboard from '@/views/status/Dashboard.vue'
  import CmdLineView from '@/views/status/CmdLineView.vue'
  import ImmeLogView from '@/views/status/ImmeLogView.vue'
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'

  export default {
    name: 'Status',
    components: {
      Dashboard,
      CmdLineView,
      ImmeLogView,
    },
    data () {
      return {
        lanChar: lan.GetLan(),
        tab: null,
        items: [
          { tab: lan.LanChar.status.StatusPageNameDashboard, id: 'Dashboard', component: Dashboard },
          { tab: lan.LanChar.status.StatusPageNameCmdLine, id: 'CmdLineView', component: CmdLineView },
          { tab: lan.LanChar.status.StatusPageNameImmeLog, id: 'ImmeLogView', component: ImmeLogView },
        ],
      }
    },
    watch: {
    },
    created () {
      this.items[0].tab = this.lanChar.status.StatusPageNameDashboard
      this.items[1].tab = this.lanChar.status.StatusPageNameCmdLine
      this.items[2].tab = this.lanChar.status.StatusPageNameImmeLog
    },
    mounted () {
      globalDef.VueObject.$on('lanChange', lanChar => {
        this.lanChar = lanChar
        this.items[0].tab = this.lanChar.status.StatusPageNameDashboard
        this.items[1].tab = this.lanChar.status.StatusPageNameCmdLine
        this.items[2].tab = this.lanChar.status.StatusPageNameImmeLog
      })
    },
    beforeDestroy () {
    },
    methods: {
    },

  }
</script>
